import 'babel-polyfill';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, Link } from '$router';
import HomePage from './home';
import yoHistory from '../../common/history';

const List = require.async('./list');
const Detail = require.async('./detail');
const Social = require.async('./social');
const War = require.async('./war');
const Login = require.async('./login');
const Register = require.async('./register');
const Mail = require.async('./mail');
const Phone = require.async('./phone');
const Personal = require.async('./personal');
const Comment = require.async('./comment');

const Root = () => (
    <Router history={yoHistory}>
        <Route path="/">
            <IndexRoute component={HomePage}/>
            <Route path="list" getComponent={List} />
            <Route path="detail/:newsId/:navsId/:newsTitle/:news_id" getComponent={Detail}/>
            <Route path="social" getComponent={Social}/>
            <Route path="war" getComponent={War}/>
            <Route path="login" getComponent={Login}/>
            <Route path="register" getComponent={Register}/>
            <Route path="register/:mail" getComponent={Mail}/>
            <Route path="register/:phone/:phone" getComponent={Phone}/>
            <Route path="personal" getComponent={Personal}/>
            <Route path="comment/:newsTitle/:navsId/:news_id" getComponent={Comment}/>
        </Route>
    </Router>
);

ReactDOM.render(<Root />, document.getElementById('root'));
